<!-- src/views/LoginView.vue -->
<template>
    <div class="min-h-screen bg-gray-100 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
      <div class="sm:mx-auto sm:w-full sm:max-w-md">
        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
          登录到你的账户
        </h2>
        <p class="mt-2 text-center text-sm text-gray-600">
          或者 <router-link to="/register" class="font-medium text-primary hover:text-primary-dark">注册新账户</router-link>
        </p>
      </div>
  
      <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
          <form @submit.prevent="handleLogin" class="space-y-6">
            <div>
              <label for="email" class="block text-sm font-medium text-gray-700">
                邮箱地址
              </label>
              <div class="mt-1">
                <input
                  v-model="email"
                  type="email"
                  id="email"
                  class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                  placeholder="example@example.com"
                  :class="{ 'border-red-500': errors.email }"
                />
                <p v-if="errors.email" class="mt-2 text-sm text-red-600">{{ errors.email }}</p>
              </div>
            </div>
  
            <div>
              <label for="password" class="block text-sm font-medium text-gray-700">
                密码
              </label>
              <div class="mt-1">
                <input
                  v-model="password"
                  type="password"
                  id="password"
                  class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                  placeholder="至少6位字符"
                  :class="{ 'border-red-500': errors.password }"
                />
                <p v-if="errors.password" class="mt-2 text-sm text-red-600">{{ errors.password }}</p>
              </div>
            </div>
  
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <input type="checkbox" id="remember-me" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                <label for="remember-me" class="ml-2 block text-sm text-gray-900">
                  记住我
                </label>
              </div>
  
              <div class="text-sm">
                <a href="#" class="font-medium text-primary hover:text-primary-dark">
                  忘记密码？
                </a>
              </div>
            </div>
  
            <div>
              <button
                :disabled="loading"
                class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
              >
                {{ loading ? '正在登录...' : '登录' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { ref, watch } from 'vue'
  import { useStore } from 'vuex'
  
  export default {
    setup() {
      const store = useStore()
      const email = ref('')
      const password = ref('')
      const errors = ref({
        email: null,
        password: null
      })
      const loading = ref(false)
      const redirect = ref(from.value.query.redirect || '/') // 从路由参数获取回调地址
  
      watch([email, password], () => {
        errors.value = {
          email: !email.value ? '请输入邮箱' : null,
          password: !password.value || password.value.length < 6 ? '密码至少6位' : null
        }
      }, { immediate: true })
  
      const handleLogin = async () => {
        // 表单验证
        const newErrors = {
          email: !email.value ? '请输入邮箱' : null,
          password: !password.value || password.value.length < 6 ? '密码至少6位' : null
        }
        
        if (Object.values(newErrors).some(err => err)) {
          errors.value = newErrors
          return
        }
  
        loading.value = true
        try {
          await store.dispatch('login', { email: email.value, password: password.value })
          // 登录成功后跳转到回调地址
          router.push(redirect.value)
        } catch (error) {
          // 处理登录错误
          errors.value.server = error.message
        } finally {
          loading.value = false
        }
      }
  
      return {
        email,
        password,
        errors,
        loading,
        handleLogin
      }
    }
  }
  </script>